<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/shopping2.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/zepto.fx.js"></script> 
    <title>Document</title>
</head>
<body>
    <div class="contain">
    <div class="head-top">
   <h4>购物车</h4>
   <img src="./image/购物车下划线.png" alt="">
    </div>

    <div class="mid-main">

        <div class="goods">
            <label for="one">
           <input type="checkbox" id="one">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>

        <div class="goods">
            <label for="two">
           <input type="checkbox" id="two">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>

        <div class="goods">
            <label for="three">
           <input type="checkbox" id="three">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>

        <div class="goods">
            <label for="four">
           <input type="checkbox" id="four">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>
<div class="man"></div>
        <div class="goods">
            <label for="five">
           <input type="checkbox" id="five">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>

        <div class="goods">
            <label for="six">
           <input type="checkbox" id="six">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>

        <div class="goods">
            <label for="seven">
           <input type="checkbox" id="seven">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>


    </div>
    <div class="foot-bot">
        <label for="eight">
        <input type="checkbox" class="all" id="eight">
       <h5>已选（2）</h5>
    </label>
       <h6>合计￥<em style="color: red;">168.00</em></h6>
       <a href="./second.html"><span>去结算</span></a>
    </div>
    <div class="foot-hidden">
        <div class="bottom-frame-del">
            <img src="./image/quxiao (1).png" alt="" style="float: right;width: 18px;height: 18px;margin: 5px 5px;" class="cancel">
    </div>
    <div class="bot-pic"> </div>
    <span style="color: #5f5f5f;font-weight: 800;margin-left: 10px;margin-top: 50px;float: left;">价格：</span>
    <span style="color: red;font-weight: 400;margin-top: 50px;float: left;">￥11</span>
    <span style="color: #5f5f5f;font-weight: 400;margin-left: 10px;margin-top: 70px;float: left;margin-left: -82px;">库存：8813</span>
    <div class="bot-bot">
        <h4 style="margin-left:10px;margin-top:10px;">属性名称1</h4>
         <div><h4>属性值1</h4></div>
         <div><h4>属性值2</h4></div>
         <div><h4>属性值3</h4></div>
         <h4 style="margin-left:10px;margin-top:30px;float: left;margin-right: 200px;">属性名称2</h4>
         <div><h4>属性值1</h4></div>
         <div><h4>属性值2</h4></div>
         <div><h4>属性值3</h4></div>
  </div>
  <div class="bot-confirm">
   <a href="#"><h3 style="text-align: center;margin-top: 10px;color: white;">确定</h3></a>
    </div>
</div>
</div>
    
<!-- 下滑单 -->


    </div>
</div>


</body>
<script>
     $(".goods input:nth-child(1)").change(function(){
      var allChecked=true;
      $(".goods input:nth-child(1)").each(function(){
         $(this).prop('checked')
         if($(this).prop("checked")==false){
          allChecked=false;
      }
      })
      $(".all").prop("checked",allChecked)
  })
$(".all").change(function(){
    var status=$(this).prop('checked')
    $(".goods input:nth-child(1)").prop("checked",status)
})

$(".count>span:nth-child(1)").tap(function(){
    var value=$(this).parent().find("input").val();
    if(value>1){
        value--;
        $(this).parent().find("input").val(value);
    }
})

$(".count>span:nth-child(3)").tap(function(){
    var value=$(this).parent().find("input").val();
    if(value>1){
        value++;
        $(this).parent().find("input").val(value);
    }
})
// 下滑属性菜单
$(".glide").tap(function(){
    $(".foot-hidden").animate({
        bottom:"40px"
    },1000)
    $(".foot-bot").hide();
})
$(".cancel").tap(function(){
    $(".foot-hidden").animate({
        bottom:"-450px"
    },1000)
    $(".foot-bot").show();
})
</script>
</html>